<!-- 分类页 -->
<template>
<div class="fenlei">
<!-- 搜索框 -->
<van-search  shape='round' v-model="value" placeholder="请输入搜索关键词" />
    <!-- 下边分类 -->
  <div class="fenl">
    <!-- 左边导航 -->
    <van-sidebar v-model="activeKey">
    <van-sidebar-item 
    :title="item.name" 
    v-for="item in categoryList"
    :key="item.id"
    @click="fenFn(item.id)"
    />       
    </van-sidebar>
    <!-- 右边渲染 -->
    <ul>
      <!-- 上边图片和文字 -->
      <div>
        <img :src="banner_url" alt="" height="140px" width="95%"/>
        <h5>{{front_desc}}</h5>
      </div>
      <!-- 居家分类 -->
      <div class="mytitle">
      <span></span>
      <h3>{{name}}</h3>
      </div>
      <!-- 列表栏 -->
      <van-grid :column-num="3">
          <van-grid-item
            v-for="item in subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
      </van-grid>
    </ul>

  </div>
</div>
</template>
<script>
//引入数据
import { GetChannelDataApi, GetFenleiDataApi } from "@/utils/https";
export default{
  data(){
    return{
      value:"",
      categoryList:[],
      activeKey:0,
      subCategoryList:[],
      titles: [],
      banner_url: [],
      name: [],
      front_desc: [],

    }
  },
  methods:{fenFn(id){
    GetChannelDataApi().then((res)=>{
      let index = this.activeKey;
      // console.log(index);
      this.front_desc = res.data.data.categoryList[index].front_desc;
      this.banner_url = res.data.data.categoryList[index].banner_url;
      this.name = res.data.data.categoryList[index].name;
    });
    GetFenleiDataApi({id}).then((res) => {
      console.log(3,res);
        let { subCategoryList } = res.data.data.currentCategory;
        this.subCategoryList = subCategoryList;
        // console.log(res);
      });
  },
  },
  created(){
   GetChannelDataApi().then((res)=>{
     console.log(1,res);
      console.log(2,res.data.data.currentCategory.subCategoryList);

    this.categoryList = res.data.data.categoryList;
    this.subCategoryList = res.data.data.currentCategory.subCategoryList;
    let index = this.activeKey;
    this.front_desc = res.data.data.categoryList[index].front_desc;
    this.banner_url = res.data.data.categoryList[index].banner_url;
    this.name = res.data.data.categoryList[index].name;

   })
  }
}
</script>
<style lang = "less" scoped>
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
/* 分类 */
.fenl {
  width: 100%;
  background-color: #fff;
  height: 90vh;
  display: flex;
  .van-sidebar {
    width: 20%;
    background-color: #f7f8fa;
  }
  ul {
    width: 80%;
    div {
      width: 100%;
      position: relative;
      img {
        margin: 0 7px;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      h5 {
        width: 100%;
        color: #fff;
        position: absolute;
        top: 48%;
        left: 0%;
        z-index: 222;
        text-align: center;
      }
    }
    .mytitle {
      width: 100%;
      height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      span {
        width: 50%;
        height: 2px;
        background-color: #ccc;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      h3 {
        width: 30%;
        height: 40px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
        color: #000;
      }
    }
  }
}
</style>
